<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script src="../lib/17//react.development.js"></script>
    <script src="../lib/17/react-dom.development.js"></script>
    <script src="../lib/17/babel.min.js"></script>
    <script src="../lib/17/prop-types.js"></script>
    <script type="text/babel">
        // 新的 生命周期钩子
        //      componentWillMount、componentWillReceiveProps、componentWillUpdate 即将被废弃，18 版本需要加上 UNSAFE_ 前缀才能使用
        //      Will 相关的，除了 componentWillUnmount 都要加 UNSAFE_
        //      原因：未来设计新的异步渲染，容易被造成误解

        //      新增  getDerivedStateFromProps 和  getSnapshotBeforeUpdate

        //      初始化阶段：1.constructor；2.getDerivedStateFromProps ；3.render；4.componentDidMount；
        //      更新（setState）阶段：1.getDerivedStateFromProps；2.shouldComponentUpdate；3.render；4.getSnapshotBeforeUpdate；5.componentDidUpdate；
        class List extends React.Component {
            state = {newArrs:[1]}
            render() {
                return (
                    <div className="list" ref="list">
                       {
                           this.state.newArrs.map(item=>{
                               return <div className="news" key={item}>{item}</div>
                           })
                       }
                    </div>
                )
            }
            getSnapshotBeforeUpdate(){
                console.log('count getSnapshotBeforeUpdate')
                return this.refs.list.scrollHeight
            }
            componentDidUpdate(pre,noew,scrollHeight){
                console.log(this.refs.list.scrollHeight , scrollHeight)
                this.refs.list.scrollTop += this.refs.list.scrollHeight - scrollHeight
            }
            componentDidMount(){
                const timer = setInterval(()=>{
                    const {newArrs} = this.state
                    if(newArrs.length > 10){
                        clearInterval(timer)
                        return
                    }
                    const news = newArrs.length + 1
                    this.setState({newArrs:[news,...newArrs]})
                },200)
            }
        }
        ReactDOM.render(<List/>, document.getElementById('test'))
    </script>
    <style>
        .list{
            height: 150px;
            overflow: auto;
            width: 300px;
        }
        .news{
            height: 30px;
        }
    </style>
</body>

</html>